<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
    :title="isAdd ? '新增' : '编辑'" width="800px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="140px">

      <el-form-item label="奖品类型">
        <el-radio-group v-model="form.prizeType" @change="couponsType">
          <el-radio :label=1>实物</el-radio>
          <el-radio :label=2>优惠券</el-radio>
          <el-radio :label=3>微信返现</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="form.prizeType == 1">
        <el-form-item label="奖品图片">
          <single-pic v-model="form.prizeImage" type="image" :num="1" :width="150" :height="150" />
        </el-form-item>
      </div>
      <div v-if="form.prizeType == 2">
        <el-form-item label="优惠券选择">
          <el-select v-model="form.couponId" filterable remote reserve-keyword placeholder="请选择优惠券"
            :remote-method="remoteMethod" :loading="loading">
            <el-option v-for="item in CouponList" :key="item.id" :label="item.cname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-if="form.prizeType == 3">
        <el-form-item label="返现金额">
          <el-input-number v-model="form.prizePrice" :min="0" label="请输入返现金额"></el-input-number>
        </el-form-item>
      </div>
      <el-form-item label="奖品名称" prop="prizeName">
        <el-input v-model="form.prizeName" style="width: 300px;" placeholder="请输入奖品名称" />
      </el-form-item>
      <el-form-item label="奖品概率" prop="prizeChance">
        <el-input-number v-model="form.prizeChance" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="奖品描述">
        <el-input v-model="form.prizeDescription" style="width: 300px;" placeholder="请输入奖品描述" />
      </el-form-item>
      <el-form-item label="奖品数量" prop="prizeNumber">
        <el-input-number v-model="form.prizeNumber" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item label="奖品价值" prop="prizePrice">
        <el-input-number v-model="form.prizePrice" :min="0"></el-input-number>
      </el-form-item>
      <el-form-item v-if="form.prizeType != 2" label="有效期" prop="validity">
        <el-date-picker v-model="form.validity" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <!-- <el-form-item label="兑换方式">
          <el-radio-group v-model="form.wayReceiving">
          <el-radio :label=1>邮寄</el-radio>
          <el-radio :label=2>线下领取</el-radio>
          <el-radio :label=3>电子兑换</el-radio>
        </el-radio-group>
        </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add, edit, Coupon } from '@/api/yxSystemPrize'
import cgood from '@/views/components/goods'
import singlePic from '@/components/singlematerial'
import { getYxStoreCouponIssue } from '@/api/yxStoreCouponIssue'

export default {
  components: { cgood, singlePic },
  props: {
    isAdd: {
      type: Boolean,
      required: true
    }
  },

  data() {
    return {
      defaultStartDate: new Date(2023, 1, 1),
      loading: false, dialog: false,
      form: {
        prizeType: 1,//奖品类型（1实物奖品、2优惠券、3零钱）
        couponId: '',//优惠卷id
        id: 0,
        prizeChance: 0,//奖品概率	
        prizeDescription: '',//	奖品描述	
        prizeImage: '',//	奖品图片	
        prizeName: '',//	奖品名称
        prizeNumber: 999,//	奖品数量	
        prizePrice: 0,//	奖品价值
        validity: '',//	有效期
        wayReceiving: 1,//	兑换/领取方式(1邮寄、2线下领取、3电子兑换)	
      },
      CouponList: [],
      rules: {
        prizeChance: [
          { required: true, message: '请输入中奖概率', trigger: 'blur' },
        ],
        prizeName: [
          { required: true, message: '请输入奖品名称', trigger: 'blur' },
        ],
        prizeNumber: [
          { required: true, message: '请输入奖品数量', trigger: 'change' },
          { pattern: /^[1-9]\d*$/, message: '请输入大于0的整数', trigger: ['blur', 'change'] },
        ],
        prizePrice: [
          { required: true, message: '请输入奖品价值', trigger: 'blur' },
        ],
        // 实物和零钱的有效期字段需必填
        validity: [
          {
            type: 'string', required: true, message: '请输入奖品有效期', trigger: 'change'
          }
        ],
      }
    }
  },
  methods: {
    remoteMethod(query) {
      console.log(query)
      if (query !== '') {
        this.loading = true;
        getYxStoreCouponIssue({
          isPrize: 1,
          cname: query
        }).then(res => {
          console.log("==============")
          console.log(res)
          this.loading = false;
          this.CouponList = res.content
        })
      } else {
        this.CouponList = [];
      }
    },
    getGoods(p) {
      var ids = []
      p.forEach((item, index) => {
        ids.push(item.id)
      })
      this.form.productId = ids.join(",")
    },
    couponsType(e) {
      this.form = {
        prizeType: e,//奖品类型（1实物奖品、2优惠券、3零钱）
        id: this.form.id,
        couponId: '',//优惠卷id
        prizeChance: 0,//奖品概率	
        prizeDescription: '',//	奖品描述	
        prizeImage: '',//	奖品图片	
        prizeName: '',//	奖品名称
        prizeNumber: 999,//	奖品数量	
        prizePrice: 0,//	奖品价值
        validity: '',//	有效期
        wayReceiving: e == 1 ? 1 : 3,//	兑换/领取方式(1邮寄、2线下领取、3电子兑换)	
      }
    },
    cancel() {
      this.resetForm()
    },
    doSubmit() {
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true
          add(this.form).then(res => {
            this.resetForm()
            this.$notify({
              title: '添加成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.$parent.init()
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        }
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      // this.$refs['form'].resetFields()
      this.form = {
        prizeType: 1,//奖品类型（1实物奖品、2优惠券、3零钱）
        id: '',
        couponId: '',//优惠卷id
        prizeChance: 0,//奖品概率	
        prizeDescription: '',//	奖品描述	
        prizeImage: '',//	奖品图片	
        prizeName: '',//	奖品名称
        prizeNumber: 999,//	奖品数量	
        prizePrice: 0,//	奖品价值
        validity: '',//	有效期
        wayReceiving: 1,//	兑换/领取方式(1邮寄、2线下领取、3电子兑换)	
      }
    }
  }
}
</script>

<style scoped></style>
